<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>倒计时</title>
</head>
<style>
    .djs {
        width: 380px;
        margin: 50px auto;
        padding: 10px;
        border: 1px solid #000;
    }

    .djs .ipt-box {
        display: flex;
        align-items: center;
    }

    .djs .ipt-box span,
    #resite {
        display: block;
        margin-left: 5px;
        padding: 2px 4px;
        border: 1px solid #000;
        border-radius: 4px;
        cursor: pointer;
    }

    .container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }
</style>

<body>
    <div class="djs">
        <div class="ipt-box">
            <label for="ipt">请选择时间：</label>
            <input type="datetime-local" id="ipt" placeholder="2020-6-18 15:30:00">
            <span id="start">开始</span>
            <div id="resite">重置</div>
        </div>
        <div class="container"></div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script>
    $(function () {

        let div = $('.container')
        let timer = null
        div.html('00天00小时00分00秒')

        // 开始
        $('.ipt-box').on('click', 'span', function () {
            let vtime = $('#ipt').val()
            console.log(vtime)
            if (!vtime.trim()) {
                alert('请输入时间')
            } else {
                console.log(timer);
                let now = +new Date()
                let t = new Date(vtime)
                let futer = t.getTime()
                let count = futer - now
                if (count <= 0) {
                    alert('您选择的时间已经过了')
                    return
                }

                if (timer) {
                    return
                }
                console.log(timer);

                $('#ipt').val('')
                timer = setInterval(() => {
                    console.log(1212121);

                    let time = dtime(vtime.trim())
                    div.html(time)
                }, 50)
                console.log(timer);

            }
        })

        // 重置
        $('#resite').on('click', function () {
            window.clearInterval(timer)
            timer = null
            $('.ipt-box > #ipt').val('')
            div.html('00天00小时00分00秒')
        })




        // 倒计时函数
        function dtime(time) {
            let now = +new Date()
            let t = new Date(time)
            let futer = t.getTime()
            let count = futer - now
            if (count <= 0) {
                window.clearInterval(timer)
                timer = null
                return '00天00小时00分00秒'
            } else {
                let D = parseInt(count / 1000 / 60 / 60 / 24)
                let H = parseInt(count / 1000 / 60 / 60 % 24)
                let M = parseInt(count / 1000 / 60 % 60)
                let S = parseInt(count / 1000 % 60)
                let HS = parseInt(count % 1000)
                D = String(D).padStart(2, '0')
                H = String(H).padStart(2, '0')
                M = String(M).padStart(2, '0')
                S = String(S).padStart(2, '0')
                HS = String(HS).padStart(3, '0')
                // return [D,H,M,S,hs]
                return `${D}天${H}小时${M}分${S}秒${HS}毫秒`
            }
        }


    })
</script>

</html>